<template>
  <video src="../../assets/ebecbea67049d90d54e463ba1faf7eef.mp4" autoplay="autoplay" muted="muted" loop="loop"></video>
  <div class="form" >
    <h1 style="text-align:center ;">{{logined.title}}</h1>
    <!-- <commonLogin></commonLogin> -->
    <!-- <messageLogin></messageLogin> -->
    <!-- {{logined.component}} -->
  <component :is="logined.component"></component>
    <div class="change">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="icon"></use>
      </svg>
      <b @click="skipFn">{{logined.skip}}</b>
    </div>
  </div>
</template>
<script setup>
import {ref,markRaw,watchEffect,computed} from "vue"
import messageLogin from "../../components/login/message.vue"
import commonLogin from "../../components/login/common.vue"
let logined = ref({
  title:"千锋管理系统",//标题
  logintype:'com',//登录类型commonLogin/messageLogin
  skip:"点击短信登陆",//切换的描述信息
  component:markRaw(commonLogin)//markRaw可以将响应式的ref变成常规对象      切换的组件
})
let isCommonLogin = ref(true)//用于标记是否常规标记
//点击切换登录方式
let skipFn = () =>{
  isCommonLogin.value = !isCommonLogin.value
}
watchEffect(()=>{
  if(isCommonLogin.value){
    logined.value ={
      title:"千锋管理系统",
      logintype:'com',
      skip:"点击短信登陆",
      component:markRaw(commonLogin)
    }
  }else{
      logined.value ={
      title:"短信登录",
      logintype:'mes',
      skip:"点击账号登陆",
      component:markRaw(messageLogin)
    }
  }
})
let icon = computed(()=>{
  return isCommonLogin.value ? "#icon-iphone" :"#icon-icon-test"
})
</script>
<style lang="less" scoped>
video{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}
.form {
  width: 400px;
  display: flex;
  flex-direction: column;
  // align-items: center;
  justify-content: center;
  position: fixed;
  right: 10%;
  top: 25%;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, .3);
  padding: 100px 0 50px 0;
}
h1{
  margin-bottom: 60px;
  color: #fff;
}

.change{
  text-align: center;
  & b{
    color: #fff;
  }
}
</style>

